Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

Layout Responsive dengan Bootstrap

Layout responsive adalah teknik untuk membuat tampilan website yang dapat menyesuaikan berbagai ukuran layar secara otomatis. Dengan Bootstrap, pembuatan layout responsive menjadi lebih mudah karena sudah tersedia grid system, utilities, dan komponen siap pakai.

Pada bagian ini, kita akan langsung melihat contoh implementasi layout responsive menggunakan Bootstrap agar mahasiswa dapat memahami penerapannya secara praktis.

1. Responsive Grid Layout

Grid digunakan untuk mengatur tata letak kolom yang akan berubah sesuai ukuran layar.

Contoh:

 
<div class="container">
<div class="row">

<div class="col-12 col-md-6 col-lg-4 bg-primary text-white p-3">
Kolom 1
</div>

<div class="col-12 col-md-6 col-lg-4 bg-success text-white p-3">
Kolom 2
</div>

<div class="col-12 col-md-6 col-lg-4 bg-danger text-white p-3">
Kolom 3
</div>

</div>
</div>
 

Penjelasan:

  • HP → 1 kolom
  • Tablet → 2 kolom
  • Desktop → 3 kolom

2. Responsive Image

Gambar harus dapat menyesuaikan ukuran layar agar tidak keluar dari layout.

Contoh:

 
<img src="gambar.jpg" class="img-fluid">
 

Penjelasan:

  • img-fluid membuat gambar otomatis menyesuaikan lebar layar
  • Tidak akan overflow dari container

3. Responsive Typography

Ukuran dan alignment teks bisa berubah sesuai ukuran layar.

Contoh:

 
<p class="text-center text-md-start fs-6 fs-lg-4">
Teks responsive Bootstrap
</p>
 

Penjelasan:

  • HP → teks kecil & tengah
  • Desktop → teks lebih besar & rata kiri

4. Responsive Spacing

Spacing (margin & padding) dapat diatur berbeda pada setiap ukuran layar.

Contoh:

 
<div class="p-2 p-md-4 p-lg-5 bg-light">
Konten dengan padding responsive
</div>
 

Penjelasan:

  • HP → padding kecil
  • Tablet → padding sedang
  • Desktop → padding besar

5. Responsive Navbar

Navbar akan berubah menjadi menu collapse pada layar kecil.

Contoh:

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">

<a class="navbar-brand" href="#">Website</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>

</div>
</nav>
 

Penjelasan:

  • Desktop → menu tampil horizontal
  • Mobile → menu menjadi tombol (hamburger)

Kesimpulan

Layout responsive dengan Bootstrap memungkinkan developer membuat tampilan website yang fleksibel dan menyesuaikan berbagai ukuran layar dengan mudah. Dengan memanfaatkan grid, image, typography, spacing, dan navbar responsive, developer dapat membangun website yang modern dan user-friendly. Pemahaman praktik ini sangat penting karena menjadi dasar dalam pengembangan website profesional.

Report Error